<template>
  <div class="setting">
    <el-dialog
      title="修改信息"
      :visible.sync="editDialogVisible"
      width="500px"
      center
      @close="editDialogClosed"
    >
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="editForm.password"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-select style="width: 380px" v-model="editForm.gender" placeholder="请选择">
            <el-option
              v-for="item in sex"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="等级" prop="rank">
          <el-input v-model="editForm.rank" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <h1 class="title">个人信息</h1>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="gender" label="性别" width align="center"></el-table-column>
      <el-table-column label="等级" width align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rank === '普通'" type="info">普通</el-tag>
          <el-tag v-else-if="scope.row.rank === '高级'" type="warning">高级</el-tag>
          <el-tag v-else type="danger">管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        :formatter="setDate"
        label="创建时间"
        width="280"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="changeTime"
        :formatter="setDate"
        label="修改时间"
        width="280"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="showEditDialog(scope.row._id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import axios from '../../axios.js'
import moment from 'moment'
export default {
  name: 'Setting',
  data() {
    return {
      sex: [
        {
          value: -1,
          label: '保密'
        },
        {
          value: 0,
          label: '男'
        },
        {
          value: 1,
          label: '女'
        }
      ],
      tableData: [],
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息对象
      editForm: {},
      queryInfo: {
        name: window.sessionStorage.getItem('user'),
        rank: '',
        gender: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      }
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.put('/user/', {
          _id: this.editForm._id,
          changeTime: new Date(),
          gender: this.editForm.gender,
          name: this.editForm.name,
          password: this.editForm.password,
          rank: this.editForm.rank
        })

        if (res.status !== 201) {
          return this.$message.error('更新信息失败！')
        }

        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.getUserList()
        // 提示修改成功
        this.$message.success('更新信息成功！')
      })
    },
    async showEditDialog(id) {
      // console.log(id)
      const { data: res } = await this.$http.get('/user/', { params: id })

      if (res.status !== 201) {
        return this.$message.error('查询用户信息失败！')
      }
      // console.log(res.user[0]._id)
      this.editForm = res.user[0]
      // console.log(this.editForm)
      this.editDialogVisible = true
    },
    setDate(row, column) {
      var newdate = row[column.property]
      if (newdate === undefined) return
      return moment(newdate).format('YYYY-MM-DD HH:mm:ss')
    },
    async getUserList() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/users', {
        params: this.queryInfo
      })
      // console.log(res)
      if (res.status !== 201) {
        return this.$message.error('获取用户列表失败！')
      }
      this.tableData = res.user
    }
  }
}
</script>

<style lang="stylus">
.setting {
  background: #fff;
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;

  .title {
    font-size: 28px;
    padding: 0 0 30px 0;
  }
}
</style>
